<template>
  <div class="keykinks-box">
    <v-chart :options="option" :auto-resize="true" @click="KeyLinksClick" />
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Vue } from "vue-property-decorator";
import { EChartOption } from "echarts";
interface dataList {
  name: string;
  value: string | number;
  itemStyle:object
}
let colorList: Array<string> = ["#FF8E1B", "#FC3C2D", "#1466F7"];
@Component
export default class KeyLinks extends Vue {
  public dataList: dataList[] = [
    {
      name: "设备告警数",
      value: 0,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,142,27,1)",
            },
            {
              offset: 1,
              color: "rgba(255,142,27,0.1)",
            },
          ]),
        },
      },
    },
    {
      name: "通讯故障数",
      value: 0,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "rgba(252,60,45,1)",
            },
            {
              offset: 1,
              color: "rgba(252,60,45,0.1)",
            },
          ]),
        },
      },
    },
    {
      name: "设备在线数",
      value: 0,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(20,102,247,1)",
            },
            {
              offset: 1,
              color: "rgba(20,102,247,0.1)",
            },
          ]),
        },
      },
    },
  ];
  public option: EChartOption = {
    tooltip: {
      trigger: "item",
      formatter: "销量 <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: "45%",
        center: ["70%", "45%"],
        data: this.dataList,
        roseType: "radius",
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        // itemStyle: {
        //   normal: {
        //     // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     //   {
        //     //     offset: 0,
        //     //     color: "red",
        //     //   },
        //     //   {
        //     //     offset: 1,
        //     //     color: "blue",
        //     //   },
        //     // ]),
        //     color: function (params: any) {
        //       var colorList = ["#FF8E1B", "#FC3C2D", "#1466F7"];
        //       return colorList[params.dataIndex % colorList.length];
        //     },
        //   },
        // },
      },
      {
        type: "pie",
        name: "最外层细圆环",
        hoverAnimation: false,
        // clockWise: false,
        center: ["70%", "45%"],
        radius: ["50%", "50%"],
        itemStyle: {
          normal: {
            borderColor: "#0C4CBF",
            borderWidth: 1,
          },
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  };
  public KeyLinksClick(val: Object): void {
    // console.log(val);
  }
}
</script>

<style lang="scss" scoped>
.keykinks-box{
  width: 100%;
  height: 100%;
  display: flex;
}
</style>